<template>
  <div class="h-[100vh] flex items-center justify-center flex-col bg-[url(images/login_bg.png)] bg-[length:100%_100%]">
    <div class="flex items-center justify-center mb-[130px]">
      <div class="flex items-center">
        <img src="../assets/images/login_party.png" alt="" class="w-[72px] h-[72px] mr-[4px]" />

        <span class="name">中共泰州市纪律检查委员会</span>
      </div>
      <div class="flex items-center ml-[100px]">
        <img src="../assets/images/login_national.png" alt="" class="w-[72px] h-[72px] mr-[4px]" />
        <span class="name">泰州市监察委员会</span>
      </div>
    </div>
    <div class="py-[56px] w-[720px] h-[440px] loginbg rounded-[24px]">
      <div class="font-bold text-[48px] mb-[36px] flex items-center justify-center text-[#1A66FF]">
        数据标准化系统
      </div>
      <div class="flex items-center justify-center">
        <el-form ref="formRef" :model="form" label-width="0" class="w-[400px]" @submit.prevent="submit" :rules
          :hide-required-asterisk="true">
          <el-form-item label="" prop="loginName" style="margin-bottom: 24px">
            <el-input v-model="form.loginName" placeholder="用户名" maxlength="20px">
              <template #prefix>
                <el-icon>
                  <User />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input v-model="form.password" placeholder="密码" type="password" maxlength="20" show-password>
              <template #prefix>
                <el-icon>
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <Button type="primary" class="w-[400px] h-[48px] rounded-[8px] mt-[30px]">登录</Button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
// import Base64 from "@/utils/base64.js";
import { Lock, View, User } from "@element-plus/icons-vue";
import { Base64 } from "js-base64";
import api from "@/api/index.js";
const formRef = ref();
const form = reactive({ loginName: "", password: "" });
const token = useToken();
const router = useRouter();
const user = useUser();
// 清除token
token.clear();
user.clear();
// const loginNameRegex = /^[a-zA-Z0-9_]{6,20}$/; // 账号正则：6-20位字母、数字或下划线
// const passwordRegex = /^[\w!@#$%^&*()\-+={}[\]|\\:;"'<>,.?/~`]{6,20}$/; // 密码正则：6-20位字母和数字或特殊字符组合
const rules = {
  loginName: [
    { required: true, message: "请输入账号", trigger: "blur" },
    // {
    //   pattern: loginNameRegex,
    //   message: "账号长度6～20位，支持数字、字母、下划线",
    //   trigger: "blur",
    // },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    // {
    //   pattern: passwordRegex,
    //   message: "密码长度6～20位，支持数字、字母、特殊字符",
    //   trigger: "blur",
    // },
  ],
};
const submit = async () => {
  formRef.value.validate(async (vaild) => {
    if (!vaild) return;
    const password = Base64.encode(form.password); //加密
    let [err, res] = await api.login({
      loginName: form.loginName,
      password: password,
    });
    if (err) return;

    // 存储token到token store
    token.replace(res.data.token);

    // 存储用户信息到user store

    user.setBasicInfo(res.data);
    user.setToken(res.data.token);


    console.log('登录成功，用户信息已存储:', user.getUserInfo);

    router.replace({ path: "/main/home-page" });
    token.replace(res.data.token);
  });
};
</script>

<style lang="scss" scoped>
main {
  border-radius: 24px;
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
  background: rgb(255, 255, 255);
}

h2 {
  font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
}

:deep(.el-input) {
  height: 48px;

  .el-input__inner {
    font-size: 16px;
    color: #000;

    &::placeholder {
      font-size: 16px;
      color: #a6a6a6;
    }
  }
}

:deep(.el-form-item) {
  display: flex;
  align-items: center;
}

.loginbg {
  background: rgba(255, 255, 255, 0.6);
}

.name {
  // font-weight: bold;
  // font-size: 40px;
  // color: #eb2a3a;
  // font-family: "SimSun", "宋体", serif;
  // text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
  //   2px 2px 0 #fff; /* 创建四个方向的白色阴影作为描边 */
  font-weight: 900;
  font-size: 64px;
  //字体颜色线性渐变
  background: -webkit-linear-gradient(rgba(199, 5, 22, 1), rgba(145, 1, 13, 1));

  font-family: "pagehome", sans-serif;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
</style>